import React, { useState } from 'react';
import './Authoring_tool.scss';
// 引入图片
import newDesignImage from '../../../public/Authoring_tool/1.jpg';
import aiDesignImage from '../../../public/Authoring_tool/2.jpg';
import imageEditImage from '../../../public/Authoring_tool/3.jpg';
import newDesignHoverImage from '../../../public/Authoring_tool/1.jpg';
import aiDesignHoverImage from '../../../public/Authoring_tool/2.jpg';
import imageEditHoverImage from '../../../public/Authoring_tool/3.jpg';
interface CreativeToolsProps {
  onCreateDesignClick: () => void;
}


const CreativeTools: React.FC<CreativeToolsProps> = (props)=> {
    const toolList = [
    {
        icon: '➕',
        title: '创建设计',
        description: '开始你的创意',
         onClick: props.onCreateDesignClick, 
        data: {
            image: newDesignImage,
            title: '创建设计',
           
        },
        hoverData: {
            image: newDesignHoverImage,
            title: '创建设计 >',
             
        },
    },
    {
        icon: '✦',
        title: 'AI设计',
        description: '探索创造极限',
        data: {
            image: aiDesignImage,
            title: 'AI设计',
        },
        hoverData: {
            image: aiDesignHoverImage,
            title: 'AI设计 >',
        },
    },
    {
        icon: '✎',
        title: '图片编辑',
        description: '全能图片处理工具',
        data: {
            image: imageEditImage,
            title: '图片编辑',
        },
        hoverData: {
            image: imageEditHoverImage,
            title: '图片编辑 >',
        },
    },
];

const toolList1 = [
    {
        icon: '🖼️',
        title: 'AI抠图',
        normalTitle: 'AI抠图',
        hoverTitle: 'AI抠图 >',
    },
    {
        icon: '🎨',
        title: 'AI绘图',
        normalTitle: 'AI绘图',
        hoverTitle: 'AI绘图 >',
    },
    {
        icon: '📑',
        title: '拼图',
        normalTitle: '拼图',
        hoverTitle: '拼图 >',
    },
    {
        icon: '💥',
        title: 'AI消除',
        normalTitle: 'AI消除',
        hoverTitle: 'AI消除 >',
    },
    {
        icon: 'H5',
        title: 'H5页面制作',
        normalTitle: 'H5页面制作',
        hoverTitle: 'H5页面制作 >',
    },
    {
        icon: '✨',
        title: 'AI变清晰',
        normalTitle: 'AI变清晰',
        hoverTitle: 'AI变清晰 >',
    },
    {
        icon: '📏',
        title: '尺寸延展',
        normalTitle: '尺寸延展',
        hoverTitle: '尺寸延展 >',
    },
    {
        icon: '🌈',
        title: '更多创作工具',
        normalTitle: '更多创作工具',
        hoverTitle: '更多创作工具 >',
    },
];
    return (
        <div className="tool-box">
            <h2 style={{ marginTop: '40px' }}>创作工具</h2>
            <div className="tool-container">
                {toolList.map((tool, index) => (
                    <ToolItem key={index} tool={tool} />
                ))}
            </div>
            <div className="tool-container1">
                {toolList1.map((tool, index) => (
                    <ToolItem1 key={index} tool={tool} />
                ))}
            </div>
        </div>
    );
};

const ToolItem = ({ tool }: { tool: typeof toolList[0] }) => {
    const [isHovered, setIsHovered] = useState(false);

    const handleMouseEnter = () => {
        setIsHovered(true);
    };

    const handleMouseLeave = () => {
        setIsHovered(false);
    };

    return (
        <div
            className="tool-item"
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
            onClick={tool.onClick}
        >
            {isHovered ? (
                <div className="image-container">
                    <div className="image-overlay">
                        <span className="overlay-title">{tool.hoverData.title}</span>
                    </div>
                    <img src={tool.hoverData.image} alt={tool.hoverData.title} className="new-design-image" />
                </div>
            ) : (
                <>
                    <div className="tool-icon">{tool.icon}</div>
                    <div className="tool-content">
                        <div className="tool-title">{tool.title}</div>
                        {tool.description && <div className="tool-desc">{tool.description}</div>}
                    </div>
                </>
            )}
        </div>
    );
};

const ToolItem1 = ({ tool }: { tool: typeof toolList1[0] }) => {
    const [isHovered, setIsHovered] = useState(false);
    const [isAnimating, setIsAnimating] = useState(false);

    const handleMouseEnter = () => {
        setIsHovered(true);
        setIsAnimating(true);
    };

    const handleMouseLeave = () => {
        setIsHovered(false);
        setIsAnimating(false);
    };

    return (
        <div
            className="tool-item1"
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            <div className="tool-icon-and-title">
                <div
                    className={`tool-icon1 ${isHovered ? 'animate-icon' : 'animate-icon-reverse'}`}
                >
                    {tool.icon}
                </div>
                <div className="tool-content1">
                    <div
                        className={`tool-title1 ${isHovered ? 'animate-title' : 'animate-title-reverse'}`}
                    >
                        {isHovered ? tool.hoverTitle : tool.normalTitle}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default CreativeTools;